<template>
  <div class="device-test">
    <div class="test-header">
      <h2>设备指纹识别测试</h2>
      <p>用于调试和验证设备识别功能</p>
    </div>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <el-button type="primary" @click="collectDeviceInfo" :loading="collecting">
        {{ collecting ? '收集中...' : '收集设备信息' }}
      </el-button>
      <el-button type="success" @click="identifyUser" :loading="identifying">
        {{ identifying ? '识别中...' : '识别用户' }}
      </el-button>
      <el-button type="warning" @click="clearUserInfo">
        清除用户信息
      </el-button>
      <el-button type="danger" @click="reidentifyUser" :loading="reidentifying">
        {{ reidentifying ? '重新识别中...' : '重新识别' }}
      </el-button>
    </div>

    <!-- 设备信息显示 -->
    <div class="info-section" v-if="deviceInfo">
      <h3>设备信息</h3>
      <div class="info-grid">
        <div class="info-item" v-for="(value, key) in deviceInfo" :key="key">
          <div class="info-label">{{ formatLabel(key) }}:</div>
          <div class="info-value">{{ value }}</div>
        </div>
      </div>
    </div>

    <!-- 用户识别结果 -->
    <div class="info-section" v-if="userIdentity">
      <h3>用户识别结果</h3>
      <div class="identity-card" :class="{ temporary: userIdentity.isTemporary }">
        <div class="identity-header">
          <span class="status-badge" :class="userIdentity.isTemporary ? 'temporary' : 'success'">
            {{ userIdentity.isTemporary ? '临时用户' : '已识别' }}
          </span>
          <span class="new-user-badge" v-if="userIdentity.isNewUser">新用户</span>
        </div>
        <div class="identity-details">
          <div class="detail-item">
            <span class="label">用户Token:</span>
            <span class="value">{{ userIdentity.userToken }}</span>
          </div>
          <div class="detail-item">
            <span class="label">访问次数:</span>
            <span class="value">{{ userIdentity.visitCount }}</span>
          </div>
          <div class="detail-item">
            <span class="label">预约次数:</span>
            <span class="value">{{ userIdentity.bookingCount }}</span>
          </div>
          <div class="detail-item" v-if="userIdentity.error">
            <span class="label">错误信息:</span>
            <span class="value error-text">{{ userIdentity.error }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 操作日志 -->
    <div class="info-section">
      <h3>操作日志</h3>
      <div class="log-container">
        <div 
          class="log-item" 
          v-for="(log, index) in logs" 
          :key="index"
          :class="log.type"
        >
          <span class="log-time">{{ log.time }}</span>
          <span class="log-message">{{ log.message }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import deviceFingerprint from '../utils/deviceFingerprint'
import { getUserStore } from '../stores/user'

// 状态变量
const collecting = ref(false)
const identifying = ref(false)
const reidentifying = ref(false)
const deviceInfo = ref(null)
const userIdentity = ref(null)
const logs = ref([])

// 获取用户状态管理器
const userStore = getUserStore()

// 添加日志
const addLog = (message, type = 'info') => {
  logs.value.unshift({
    time: new Date().toLocaleTimeString(),
    message,
    type
  })
  
  // 限制日志数量
  if (logs.value.length > 50) {
    logs.value = logs.value.slice(0, 50)
  }
}

// 格式化字段标签
const formatLabel = (key) => {
  const labelMap = {
    deviceFingerprint: '设备指纹',
    screenResolution: '屏幕分辨率',
    timezone: '时区',
    language: '语言',
    platform: '平台',
    userAgent: '用户代理'
  }
  return labelMap[key] || key
}

// 收集设备信息
const collectDeviceInfo = async () => {
  collecting.value = true
  addLog('开始收集设备信息...', 'info')
  
  try {
    const info = await deviceFingerprint.collectDeviceInfo()
    deviceInfo.value = info
    addLog('设备信息收集成功', 'success')
    ElMessage.success('设备信息收集成功')
  } catch (error) {
    addLog(`设备信息收集失败: ${error.message}`, 'error')
    ElMessage.error('设备信息收集失败')
  } finally {
    collecting.value = false
  }
}

// 识别用户
const identifyUser = async () => {
  identifying.value = true
  addLog('开始用户识别...', 'info')
  
  try {
    const identity = await deviceFingerprint.identifyUser()
    userIdentity.value = identity
    
    if (identity.isTemporary) {
      addLog('用户识别失败，使用临时身份', 'warning')
      ElMessage.warning('用户识别失败，已生成临时身份')
    } else {
      addLog(`用户识别成功: ${identity.isNewUser ? '新用户' : '返回用户'}`, 'success')
      ElMessage.success('用户识别成功')
    }
  } catch (error) {
    addLog(`用户识别失败: ${error.message}`, 'error')
    ElMessage.error('用户识别失败')
  } finally {
    identifying.value = false
  }
}

// 清除用户信息
const clearUserInfo = () => {
  deviceFingerprint.clearUserInfo()
  userStore.clearUserInfo()
  deviceInfo.value = null
  userIdentity.value = null
  addLog('用户信息已清除', 'warning')
  ElMessage.info('用户信息已清除')
}

// 重新识别用户
const reidentifyUser = async () => {
  reidentifying.value = true
  addLog('开始重新识别用户...', 'info')
  
  try {
    const identity = await userStore.reidentifyUser()
    userIdentity.value = identity
    
    if (identity && !identity.isTemporary) {
      addLog('用户重新识别成功', 'success')
      ElMessage.success('用户重新识别成功')
    } else {
      addLog('用户重新识别失败', 'warning')
      ElMessage.warning('用户重新识别失败')
    }
  } catch (error) {
    addLog(`重新识别失败: ${error.message}`, 'error')
    ElMessage.error('重新识别失败')
  } finally {
    reidentifying.value = false
  }
}

// 组件挂载时初始化
onMounted(() => {
  addLog('设备指纹测试页面已加载', 'info')
  
  // 获取当前用户信息
  const currentIdentity = userStore.getUserIdentity()
  if (currentIdentity) {
    userIdentity.value = currentIdentity
    addLog('发现已存在的用户信息', 'info')
  }
  
  // 获取设备信息
  if (deviceFingerprint.deviceInfo) {
    deviceInfo.value = deviceFingerprint.deviceInfo
    addLog('发现已收集的设备信息', 'info')
  }
})
</script>

<style scoped>
.device-test {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.test-header {
  text-align: center;
  margin-bottom: 30px;
  padding: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.test-header h2 {
  margin: 0 0 10px 0;
  color: #333;
}

.test-header p {
  margin: 0;
  color: #666;
}

.action-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.info-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.info-section h3 {
  margin: 0 0 16px 0;
  color: #333;
  border-bottom: 2px solid #f0f0f0;
  padding-bottom: 8px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
}

.info-item {
  display: flex;
  padding: 8px 0;
  border-bottom: 1px solid #f8f8f8;
}

.info-label {
  font-weight: 500;
  color: #555;
  min-width: 120px;
}

.info-value {
  flex: 1;
  color: #333;
  word-break: break-all;
  font-family: 'Courier New', monospace;
  font-size: 13px;
}

.identity-card {
  border: 2px solid #4CAF50;
  border-radius: 8px;
  padding: 16px;
  background: #f8fff8;
}

.identity-card.temporary {
  border-color: #FF9800;
  background: #fff8f0;
}

.identity-header {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge.success {
  background: #4CAF50;
  color: white;
}

.status-badge.temporary {
  background: #FF9800;
  color: white;
}

.new-user-badge {
  padding: 4px 12px;
  border-radius: 20px;
  background: #2196F3;
  color: white;
  font-size: 12px;
  font-weight: 500;
}

.identity-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-item .label {
  font-weight: 500;
  color: #555;
  min-width: 80px;
}

.detail-item .value {
  flex: 1;
  color: #333;
  font-family: 'Courier New', monospace;
  font-size: 13px;
}

.error-text {
  color: #f56565 !important;
}

.log-container {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background: #fafafa;
}

.log-item {
  display: flex;
  padding: 8px 12px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 13px;
  font-family: 'Courier New', monospace;
}

.log-item:last-child {
  border-bottom: none;
}

.log-item.success {
  background: #f0f9ff;
  color: #065f46;
}

.log-item.error {
  background: #fef2f2;
  color: #991b1b;
}

.log-item.warning {
  background: #fffbeb;
  color: #92400e;
}

.log-time {
  min-width: 100px;
  color: #666;
  margin-right: 12px;
}

.log-message {
  flex: 1;
}

@media (max-width: 768px) {
  .action-buttons {
    flex-direction: column;
    align-items: stretch;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .detail-item {
    flex-direction: column;
    align-items: flex-start;
  }
}
</style> 